<template>
  <!-- 自己封装的 封装组件 -->
  <div class="hot-nav">
    <!-- 滚动区域 -->
    <div class="hot-nav-content">
      <div class="nav-content-inner">
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
        <a class="inner-item">
          <img src="../images/secKill.png" alt />
          <span>限时秒杀</span>
        </a>
      </div>
      <!-- 进度条 -->
    </div>
    <!-- 进度条 -->
    <div class="hot-nav-bottom">
      <div class="hot-nav-bottom-inner" :style="innerBarStyle"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //屏幕宽度
      screenW:
        window.innerWidth ||
        document.documentElement.clientHeight ||
        document.body.clientWidth,
      //滚动内容宽度
      scrollContentW: 720,
      bgBarW: 100,
      barXWidth: 0,
      //起点
      startX: 0,
      // 纪录结束点
      endFlag: 0,
      //移动的距离
      barMoveWidth: 0
    };
  },
  mounted() {
    this.getBottomBarWidth();
    //1监听移动端的触摸事件
    this.bindEvent();
  },
  computed: {
    innerBarStyle() {
      return {
        width: `${this.barXWidth}px`,
        left: `${this.barMoveWidth}px`
      };
    }
  },
  methods: {
    getBottomBarWidth() {
      const { barXWidth, bgBarW, screenW, scrollContentW } = this;
      this.barXWidth = bgBarW * (screenW / scrollContentW);
    },
    //2.监听移动端的触摸事件
    bindEvent() {
      this.$el.addEventListener("touchstart", this.handleTouchStart, false);
      this.$el.addEventListener("touchmove", this.handleTouchMove, false);
      this.$el.addEventListener("touchend", this.handleTouchEnd, false);
    },
    //开始触摸
    handleTouchStart() {
      this.startX = event.touches[0].pageX;
    },
    //开始移动
    handleTouchMove() {
      let moveWidth = event.touches[0].pageX - this.startX;
      this.barMoveWidth = -(
        (this.bgBarW / this.scrollContentW) * moveWidth -
        this.endFlag
      );
      //边界处理
      if (this.barMoveWidth <= 0) {
        this.barMoveWidth = 0;
      } else if (this.barMoveWidth >= this.bgBarW - this.barXWidth) {
        this.barMoveWidth = this.bgBarW - this.barXWidth;
      }
    },
    //结束移动
    handleTouchEnd() {
      this.endFlag = this.barMoveWidth;
    }
  }
};
</script>
<style lang='scss' scoped>
.hot-nav {
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
  .hot-nav-content {
    width: 100%;
    overflow-x: auto;
    height: 180px;
    .nav-content-inner {
      width: 720px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-content: center;
      flex-flow: wrap;
      .inner-item {
        width: 90px;
        height: 60px;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        color: #666;
        img {
          width: 45%;
        }
      }
    }
  }
}
.hot-nav-bottom {
  width: 100px;
  height: 2px;
  background-color: #ccc;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  bottom: 0;
  .hot-nav-bottom-inner {
    // 相对于之前的position 定位
    position: absolute;
    left: 0;
    height: 100%;
    background: orangered;
    width: 0;
  }
}
</style>